<template>
  <div>
    <el-row>
      <div>
        <el-form :inline="true" :model="formData" class="demo-form-inline">
          <el-form-item label="机构编号/名称">
            <el-input v-model="formData.orgCodeName"></el-input>
          </el-form-item>
          <el-form-item label="人员编号/名称">
            <el-input v-model="formData.userCodeName"></el-input>
          </el-form-item>
        </el-form>
        <el-tree :data="treeData"></el-tree>
      </div>
      <div>
        <el-row align="middle">
          <el-button type="primary">选择</el-button>
          <el-button type="danger">删除</el-button>
          <el-button type="danger">全删</el-button>
          <el-button type="success" @click="selectCallBack">确定</el-button>
        </el-row>
      </div>
      <div>
        <el-row align="top">
          <span v-for="user in showUsers ">{{user.name}}</span>
        </el-row>
      </div>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'UserSelector',
    props: ['selectedUsers', 'selectParams'],
    data() {
      return {
        formData: {
          orgCodeName: '',
          userCodeName: ''
        },
        treeData: [],
        showUsers: this.selectedUsers
      }
    },
    mounted() {

    },
    methods: {
      async queryData() {
        let reqBody = Object.assign({}, this.formData)
        reqBody.userCodes = this.showUsers
        reqBody.queryParams = this.selectParams

      },
      selectCallBack() {
        this.$emit('selectedBack', this.showUsers)
      }
    }
  }
</script>

<style type="text/scss">
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
